<template>
  <div class="searchResult">
    <!--
        导航栏；
        $router.back()返回上一个页面；
        left-arrow：是否显示左侧箭头，默认false，
                    当标签填写left-arrow属性时，值为true；
        fixed：是否固定在顶部；
        $route.query.keyword：获取上一个路由跳转时携带过来的参数，不是$router
    -->
    <van-nav-bar
      :title=" $route.query.keyword+'的搜索结果'"
      left-arrow
      fixed
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <!-- 文章列表 -->
    <van-list
      class="article-list"
      v-model="loading"
      :finished="finished"
      finished-text="没有了，已经被榨干了"
      @load="resultOnLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.art_id.toString()"
        :title="item.title"
        @click="$router.push('/article/'+item.art_id.toString())"
      />
    </van-list>
    <!-- /文章列表 -->
  </div>
</template>

<script>
  // 按需引入搜索模块API
  import { reqGetSearch } from '@/api/search.js'

  export default {
    name: 'searchResult',
    data () {
      return {
        // 搜索结果
        list: [],
        // 是否处于加载状态
        loading: false,
        // 是否已加载完成，加载完成后不再触发load事件
        finished: false,
        // 分页-当前页
        page: 1,
        // 分页-每页显示条数
        per_page: 20
      }
    },
    created () {
      // console.log(this.$route) // 路由信息对象
      // 获取路由信息对象的参数 如果是?携带参数 this.$route.query.xxx
      // 如果使用的是params传参(/参数) , 路由规则要提前挖坑  this.$route.params.xxx
    },
    methods: {
      //下滑加载搜索内容
      async resultOnLoad () {
        // 获取上一个路由跳转时携带的参数
        const keyword = this.$route.query.keyword
        // 调用API
        const res = await reqGetSearch(this.page, this.per_page, keyword)
        const arr = res.data.data.results
        // 将结果追加到list后面
        // 之所以没使用this.list = arr，是为了下滑获取接口数据时，上面的数据不会被覆盖
        this.list.push(...arr)
        this.page++ // 页码自增
        // 将loading改为false
        this.loading = false

        // 判断是否已经全部加载完毕
        if (arr.length === 0) {
          // 关闭，不再触发load事件
          this.finished = true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchResult {
    padding-top: 46px;
  }
</style>
